<template>
  <div class="container">
    <!-- <nav-bar title="支付管理" /> -->
    <div class="send-form">
      <!-- <div class="item">
        <div class="label">选择开户银行</div>
        <input type="text" placeholder="请选择开户银行">
      </div> -->
      <div class="item">
        <div class="label">本人的银行卡号</div>
        <input type="text" v-model="cardNo" placeholder="请输入您的银行卡号">
      </div>
      <div class="item">
        <div class="label">真实姓名</div>
        <input type="text" v-model="RealName" placeholder="请输入">
      </div>
      <div class="item">
        <div class="label">身份证号</div>
        <input type="text" v-model="IdCard" placeholder="请输入">
      </div>
      <div class="item">
        <div class="label">手机号码</div>
        <input type="text" v-model="Mobile" placeholder="请输入">
      </div>
      <div class="item">
        <div class="label">银行名称</div>
        <div @click="checkBank">
          <div v-if="BankName" class="ipt ipt-city">{{BankName}}</div>
          <div v-else class="ipt ipt-city"><i>请选择</i></div>
        </div>
        <van-popup v-model="pickedBankShow" position="bottom">
          <van-picker
            show-toolbar
            title="选择银行"
            :columns="bankList"
            value-key="name"
            @confirm="pickedBank"
          />
        </van-popup>
      </div>
      <div class="item">
        <div class="label">开户城市</div>
        <div @click="showArea">
          <div v-if="city" class="ipt ipt-city">{{province + ' ' + city}}</div>
          <div v-else class="ipt ipt-city"><i>请选择</i></div>
        </div>
        <van-popup v-model="areaShow" position="bottom">
          <van-picker 
            show-toolbar 
            title="城市选择" 
            :columns="cityList" 
            value-key="title" 
            @confirm="areaConfirm"
            @cancel="areaCancel"
          />
        </van-popup>
      </div>
      <div class="tips">
        <p>温馨提示</p>
        <p>请填写上述真实信息，否则将无法提现</p>
      </div>
      <div class="sure" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { bindBankCard } from '../../network/belong'
import { Toast } from 'vant'
import { request, bandCardReg, phoneReg, iDCardReg } from '../../utils/'
import bank from '../../assets/js/bank'
import bankArea from '../../assets/js/bankArea'
import axios from 'axios'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      cardNo: '',
      RealName: '',
      IdCard: '',
      Mobile: '',
      BankName: '',
      BankCode: '',
      province: '',
      city: '',
      areaShow: false,
      ProviceCode: '',
      AreaCode: '',
      bankList: [],
      pickedBankShow: false,

      cityList: [],
    }
  },
  mounted() {
    
    // 获取银行列表
    this.bankList = bank.bankList

    // 获取城市列表
    this.cityList = bankArea.areaList
    bankArea.areaList.map(item => {
      item.children = item.cities
      return item
    })
  },
  methods: {
    checkBank4c(){
      return new Promise(resolve => {
        axios({
          url: 'https://bankcard4c.shumaidata.com/bankcard4c',
          headers: {
            Authorization: 'APPCODE 421ecb72377e426d8c1f53c598806b7f'
          },
          params: {
            bankcard: this.cardNo,
            idcard: this.IdCard,
            mobile: this.Mobile,
            name: this.RealName,
          }
        }).then(res => {
          resolve(res)
        })
      })
    },
    checkBankAddress(){
      return new Promise(resolve => {
        axios({
          url: 'https://bankaddress.shumaidata.com/bankaddress',
          headers: {
            Authorization: 'APPCODE 421ecb72377e426d8c1f53c598806b7f'
          },
          params: {
            bankcard: this.cardNo,
          }
        }).then(res => {
          resolve(res)
        })
      })
    },
    showArea(){
      this.areaShow = true
    },
    areaCancel(){
      this.areaShow = false
    },
    areaConfirm(e, idx){
      let provObj = this.cityList[idx[0]]
      this.province = e[0]
      this.city = e[1]
      this.ProviceCode = provObj.value
      this.AreaCode = provObj.children[idx[1]].value
      this.areaShow = false
    },
    checkBank(){
      this.pickedBankShow = true
    },
    pickedBank(e){
      this.BankName = e.name
      this.BankCode = e.code
      this.pickedBankShow = false
    },
    async submit(){
      if(!bandCardReg(this.cardNo)){
        Toast('银行卡号格式错误')
        return false
      }
      if(!iDCardReg(this.IdCard)){
        Toast('身份证号输入错误')
        return false
      }
      if(!phoneReg(this.Mobile)){
        Toast('手机号输入错误')
        return false
      }
      // 三方校验银行卡四要素
      let bank4cResult = await this.checkBank4c()
      if(bank4cResult.data.data.result){
        Toast(bank4cResult.data.data.desc)
        return false
      }
      // 三方校验银行卡所在地
      let bankAddressResult = await this.checkBankAddress()
      if(bankAddressResult.data.success){
        let bank = bankAddressResult.data.data.bank
        let province = bankAddressResult.data.data.province
        let city = bankAddressResult.data.data.city
        if(bank.indexOf(this.BankName) === -1){
          Toast('银行名称不匹配')
          return false
        }
        if(this.province !== province){
          Toast('银行卡开户城市不匹配')
          return false
        }
        if(!(this.city === city || this.city + '市' === city)){
          Toast('银行卡开户城市不匹配')
          return false
        }
      }

      let requestData = {
        userkey: this.userKey,
        CardNo: this.cardNo,
        RealName: this.RealName,
        IdCard: this.IdCard,
        Mobile: this.Mobile,
        BankCode: this.BankCode,
        ProviceCode: this.ProviceCode,
        AreaCode: this.AreaCode,
      }
      bindBankCard(requestData, () => {
        Toast({
          message: '提交成功',
          duration: 1000
        })
        setTimeout(() => {
          this.$router.push('payment')
        }, 1000)
      })
    },
  },
}
</script>

<style scoped>

.send-form{
  min-height: 100px;
  padding: 10px 30px 80px 30px;
}
.send-form .item{
  padding-top: 15px;
}
.send-form .item .label{
  font-size: 14px;
  line-height: 1.2;
}
.send-form .item input{
  display: block;
  width: 100%;
  height: 50px;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
  background: none;
}
.send-form .item input::placeholder{
  color: #c7c7c7;
}
.sure{
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  border-radius: 50px;
  margin-top: 20px;
  background-color: #000000;
}
.tips{
  padding: 40px 0 10px 0;
  font-size: 12px;
  color: #999999;
  line-height: 1.6;
}
.ipt-city{
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e0e0e0;
}
.ipt-city i{
  color: #ccc;
  font-size: 16px;
}
</style>